// 源插件
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Col, DatePicker, Upload, Form, Input, Row, Icon, Select } from 'antd';
// 引入编辑器组件
import BraftA from './BraftA';
import BraftB from './BraftB';
import BraftC from './BraftC';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import 'braft-extensions/dist/table.css';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// css OR less预编译器
const FormItem = Form.Item;
const { Option } = Select;
// 图片
/**
 *  Describe:数据连接
 *  Created by xjc on 2019/5/15
 */
@connect(({ mail, loading }) => ({
  mail,
  loading: loading.models.mailRule,
}))
@Form.create()
class Email extends PureComponent {
  componentWillMount() {}

  state = {
    message: {
      subject: '',
      ccs: [],
      tos: [],
    },
    fileList: [],
    model: 'A',
  };

  handleSubmit = event => {
    event.preventDefault();

    this.props.form.validateFields((error, values) => {
      if (!error) {
        const submitData = {
          title: values.title,
          content: values.content.toRAW(), // or values.content.toHTML()
        };
        console.log(submitData);
      }
    });
  };

  headChange(e) {
    this.setState({ subject: e.target.value });
  }

  addresseeChange(value) {
    this.setState({ tos: value });
  }

  copyChange(value) {
    this.setState({ ccs: value });
  }

  handleUpload = () => {
    const { fileList } = this.state;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('files[]', file);
    });

    this.setState({
      uploading: true,
    });
  };

  handleChange(value) {
    this.setState({
      model: value,
    });
  }

  render() {
    const { message, fileList, model } = this.state;

    const propss = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    return (
      <PageHeaderWrapper>
        <Card>
          <Select defaultValue="A" style={{ width: 300 }} onChange={this.handleChange.bind(this)}>
            <Option value="A">外汇期权报价模板</Option>
            <Option value="B">RCN报价模板</Option>
            <Option value="C">AQDQ报价模板</Option>
          </Select>
          <br />
          <br />
          <div style={{ padding: 5 }}>
            <p>//2020.3.2 现在邮件可以快速添加指定内容行列需要指定课通知并提交需求</p>
            <p>//只可在表格内操作以外内容都会被删除</p>
            <p>//表格增删行列操作在左边缘和上边缘出（删除需要单击边缘）</p>
            <p>//表格右键删除该表还有合并行列</p>
          </div>
          {/* <Row> */}
          {/* <Col md={24} sm={24}> */}
          {/* 请输入收件人：<Select mode="tags" style={{width: 300, margin:8, }} placeholder="收件人" onChange={this.addresseeChange.bind(this)}> */}
          {/* <Option key={i.toString(36) + i}>{i.toString(36) + i}</Option> */}
          {/* </Select> */}
          {/* </Col> */}
          {/* </Row> */}
          {/* <Row> */}
          {/* <Col md={24} sm={24}> */}
          {/* 请输入抄送人：<Select mode="tags" style={{width: 300, margin:8, }} placeholder="收件人" onChange={this.copyChange.bind(this)}> */}
          {/* <Option key={i.toString(36) + i}>{i.toString(36) + i}</Option> */}
          {/* </Select> */}
          {/* </Col> */}
          {/* </Row> */}
          {/* <Row> */}
          {/* <Col md={24} sm={24}> */}
          {/* 请输入标题：<Input style={{width: 300, margin:8, }} onChange={this.headChange.bind(this)}/> */}
          {/* </Col> */}
          {/* </Row> */}

          {/* <Row> */}
          {/* <Col md={24} sm={24}> */}
          {/* <div  style={{width: 300, margin:'8px 0', }}> */}
          {/* <Upload {...propss}> */}
          {/* <Button> */}
          {/* <Icon type="upload" /> 上传附件 */}
          {/* </Button> */}
          {/* </Upload> */}
          {/* </div> */}
          {/* </Col> */}
          {/* </Row> */}
          <br />
          {model === 'A' ? (
            <BraftA message={message} fileList={fileList} />
          ) : model === 'B' ? (
            <BraftB message={message} fileList={fileList} />
          ) : model === 'C' ? (
            <BraftC message={message} fileList={fileList} />
          ) : null}
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    // this.getKline();
  }

  componentWillUnmount() {}
}

export default Email;
